<!doctype html>
<!-- Copyright 2016 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<html>
<head lang="en">
  <link rel="icon" type="image/png" href="favicon.png">
  <meta charset="utf-8">
  <meta name="viewport" content="width=1024">
  <meta name="keywords" content="neural networks,machine learning,javascript">

  <meta property="og:type" content="article"/>
  <meta property="og:title" content="Tensorflow — Neural Network Playground"/>
  <meta property="og:description" content="Tinker with a real neural network right here in your browser.">
  <meta property="og:url" content="http://playground.tensorflow.org"/>
  <meta property="og:image" content="http://playground.tensorflow.org/preview.png"/>

  <meta name="twitter:card" value="summary_large_image">
  <meta name="twitter:title" content="Tensorflow — Neural Network Playground">
  <meta name="twitter:description" content="Tinker with a real neural network right here in your browser.">
  <meta name="twitter:url" content="http://playground.tensorflow.org">
  <meta name="twitter:image" content="http://playground.tensorflow.org/preview.png">
  <meta name="twitter:image:width" content="560">
  <meta name="twitter:image:height" content="295">

  <meta name="author" content="Daniel Smilkov and Shan Carter">
  <title>A Neural Network Playground</title>
  <link rel="stylesheet" href="bundle.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet" type="text/css">
  <script src="lib.js"></script>
</head>
<body>

  <!-- Top Controls -->
  <div id="top-controls">
    <div class="container l--page">
      <div class="timeline-controls">
        <button class="mdl-button mdl-js-button mdl-button--icon ui-resetButton" id="reset-button" title="Reset the network">
          <i class="material-icons">replay</i>
        </button>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored ui-playButton" id="play-pause-button" title="Run/Pause">
          <i class="material-icons">play_arrow</i>
          <i class="material-icons">pause</i>
        </button>
        <button class="mdl-button mdl-js-button mdl-button--icon ui-stepButton" id="next-step-button" title="Step">
          <i class="material-icons">skip_next</i>
        </button>
      </div>
      <div class="control">
        <span class="label">周期</span>
        <span class="value" id="iter-number"></span>
      </div>
      <div class="control ui-learningRate">
        <label for="learningRate">学习率</label>
        <div class="select">
          <select id="learningRate">
            <option value="0.00001">0.00001</option>
            <option value="0.0001">0.0001</option>
            <option value="0.001">0.001</option>
            <option value="0.003">0.003</option>
            <option value="0.01">0.01</option>
            <option value="0.03">0.03</option>
            <option value="0.1">0.1</option>
            <option value="0.3">0.3</option>
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="10">10</option>
          </select>
        </div>
      </div>
      <div class="control ui-activation">
        <label for="activations">激活函数</label>
        <div class="select">
          <select id="activations">
            <option value="relu">ReLU</option>
            <option value="tanh">Tanh</option>
            <option value="sigmoid">Sigmoid</option>
            <option value="linear">Linear</option>
          </select>
        </div>
      </div>
      <div class="control ui-regularization">
        <label for="regularizations">正则化</label>
        <div class="select">
          <select id="regularizations">
            <option value="none">None</option>
            <option value="L1">L1</option>
            <option value="L2">L2</option>
          </select>
        </div>
      </div>
      <div class="control ui-regularizationRate">
        <label for="regularRate">正则化率</label>
        <div class="select">
          <select id="regularRate">
            <option value="0">0</option>
            <option value="0.001">0.001</option>
            <option value="0.003">0.003</option>
            <option value="0.01">0.01</option>
            <option value="0.03">0.03</option>
            <option value="0.1">0.1</option>
            <option value="0.3">0.3</option>
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="10">10</option>
          </select>
        </div>
      </div>
      <div class="control ui-problem">
        <label for="problem">问题类型</label>
        <div class="select">
          <select id="problem">
            <option value="classification">分类</option>
            <option value="regression">回归</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Part -->
  <div id="main-part" class="l--page">

    <!--  Data Column-->
    <div class="column data">
      <h4>
        <span>数据</span>
      </h4>
      <div class="ui-dataset">
        <p>使用哪一个数据集?</p>
        <div class="dataset-list">
          <div class="dataset" title="Circle">
            <canvas class="data-thumbnail" data-dataset="circle"></canvas>
          </div>
          <div class="dataset" title="Exclusive or">
            <canvas class="data-thumbnail" data-dataset="xor"></canvas>
          </div>
          <div class="dataset" title="Gaussian">
            <canvas class="data-thumbnail" data-dataset="gauss"></canvas>
          </div>
          <div class="dataset" title="Spiral">
            <canvas class="data-thumbnail" data-dataset="spiral"></canvas>
          </div>
          <div class="dataset" title="Plane">
            <canvas class="data-thumbnail" data-regDataset="reg-plane"></canvas>
          </div>
          <div class="dataset" title="Multi gaussian">
            <canvas class="data-thumbnail" data-regDataset="reg-gauss"></canvas>
          </div>
        </div>
      </div>
      <div>
        <div class="ui-percTrainData">
          <label for="percTrainData">训练数据占比:&nbsp;&nbsp;<span class="value">XX</span>%</label>
          <p class="slider">
            <input class="mdl-slider mdl-js-slider" type="range" id="percTrainData" min="10" max="90" step="10">
          </p>
        </div>
        <div class="ui-noise">
          <label for="noise">噪声:&nbsp;&nbsp;<span class="value">XX</span></label>
          <p class="slider">
            <input class="mdl-slider mdl-js-slider" type="range" id="noise" min="0" max="50" step="5">
          </p>
        </div>
        <div class="ui-batchSize">
          <label for="batchSize">Batch 大小:&nbsp;&nbsp;<span class="value">XX</span></label>
          <p class="slider">
            <input class="mdl-slider mdl-js-slider" type="range" id="batchSize" min="1" max="30" step="1">
          </p>
        </div>
          <button class="basic-button" id="data-regen-button" title="Regenerate data">
            重新生成
          </button>
      </div>
    </div>

    <!-- Features Column -->
    <div class="column features">
      <h4> 特征</h4>
      <p>你想通入哪些特征?</p>
      <div id="network">
        <svg id="svg" width="510" height="450">
          <defs>
            <marker id="markerArrow" markerWidth="7" markerHeight="13" refX="1" refY="6" orient="auto" markerUnits="userSpaceOnUse">
              <path d="M2,11 L7,6 L2,2" />
            </marker>
          </defs>
        </svg>
        <!-- Hover card -->
        <div id="hovercard">
          <div style="font-size:10px">点击编辑</div>
          <div><span class="type">权重/偏置</span>是<span class="value">0.2</span><span><input type="number"/></span>.</div>
        </div>
        <div class="callout thumbnail">
          <svg viewBox="0 0 30 30">
            <defs>
              <marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
                <path d="M0,0 L5,2.5 L0,5 z"/>
              </marker>
            </defs>
            <path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
          </svg>
          <div class="label">
            这是一个<b>神经元</b>的输出. 悬浮看大图.
          </div>
        </div>
        <div class="callout weights">
          <svg viewBox="0 0 30 30">
            <defs>
              <marker id="arrow" markerWidth="5" markerHeight="5" refx="5" refy="2.5" orient="auto" markerUnits="userSpaceOnUse">
                <path d="M0,0 L5,2.5 L0,5 z"/>
              </marker>
            </defs>
            <path d="M12,30C5,20 2,15 12,0" marker-end="url(#arrow)">
          </svg>
          <div class="label">
            输出与<b>权重</b>混合, 线宽度代表的权重(橙色为负, 蓝色为正).
          </div>
        </div>
      </div>
    </div>

    <!-- Hidden Layers Column -->
    <div class="column hidden-layers">
      <h4>
        <div class="ui-numHiddenLayers">
          <button id="add-layers" class="mdl-button mdl-js-button mdl-button--icon">
            <i class="material-icons">add</i>
          </button>
          <button id="remove-layers" class="mdl-button mdl-js-button mdl-button--icon">
            <i class="material-icons">remove</i>
          </button>
        </div>
        <span id="num-layers"></span>
        <span id="layers-label"></span>
      </h4>
      <div class="bracket"></div>
    </div>

    <!-- Output Column -->
    <div class="column output">
      <h4>输出</h4>
      <div class="metrics">
        <div class="output-stats ui-percTrainData">
          <span>测试集损失</span>
          <div class="value" id="loss-test"></div>
        </div>
        <div class="output-stats train">
          <span>训练集损失</span>
          <div class="value" id="loss-train"></div>
        </div>
        <div id="linechart"></div>
      </div>
      <div id="heatmap"></div>
      <div style="float:left;margin-top:20px">
        <div style="display:flex; align-items:center;">

          <!-- Gradient color scale -->
          <div class="label" style="width:105px; margin-right: 10px">
            颜色显示数据, 神经元和权重的值.
          </div>
          <svg width="150" height="30" id="colormap">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#f59322" stop-opacity="1"></stop>
                <stop offset="50%" stop-color="#e8eaeb" stop-opacity="1"></stop>
                <stop offset="100%" stop-color="#0877bd" stop-opacity="1"></stop>
              </linearGradient>
            </defs>
            <g class="core" transform="translate(3, 0)">
              <rect width="144" height="10" style="fill: url('#gradient');"></rect>
            </g>
          </svg>
        </div>
        <br/>
        <div style="display:flex;">
          <label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
            <input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
            <span class="mdl-checkbox__label label">显示测试数据</span>
          </label>
          <label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
            <input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
            <span class="mdl-checkbox__label label">离散化输出</span>
          </label>
        </div>
      </div>
    </div>

  </div>

 

  <!-- Footer -->
  <footer>
    <div class="l--body">
      <a href="https://www.tensorflow.org/" class="logo">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 528 87" xml:space="preserve">
        	<path d="M37.4,15.5v70.3H25V15.5H1V3.4h60.4v12.1H37.4z"/>
        	<path d="M149,85.8v-35c0-12.5-4.7-16.9-12.7-16.9c-8.1,0-12.7,5.8-12.7,15.8v36.1h-12.1V24h12.1v5.9c3.1-4.5,9.2-7.2,15.5-7.2
        		c14.4,0,22,9.4,22,27.7v35.4H149z"/>
        	<path d="M188.7,87.1c-8.4,0-17.4-3.3-23.7-7.9l5.5-9.2c5.8,4,12.2,6.1,18,6.1c7.7,0,11.3-2.5,11.3-6.8c0-4.7-5.4-6.9-14.4-10.4
        		c-13.3-5.2-18.1-9.7-18.1-19.4c0-11.1,8.7-16.8,21.1-16.8c7.8,0,15.4,2.8,21,6.8l-5.3,9.3c-5.1-3.5-10.1-5.3-16-5.3
        		c-5.9,0-8.5,2.4-8.5,5.7c0,3.1,2.1,5.3,11.4,8.9c13.8,5.3,20.8,9.1,20.8,20.7C211.9,82.5,200.8,87.1,188.7,87.1z"/>
        	<path d="M242,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
        		C269.9,75.1,257.9,87.1,242,87.1z M241.9,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
        		C257.7,42.4,251.7,34.3,241.9,34.3z"/>
        	<path d="M310,36.8c-2.6-1.4-5.3-2.2-9.3-2.2c-7.7,0-12.1,5.4-12.1,15.9v35.3h-12.1V24h12.1v5.9c2.8-4.1,8-7.2,14.1-7.2
        		c4.9,0,8,0.9,10.5,2.6L310,36.8z"/>
        	<path d="M330.3,15.5v21.5H354v12.1h-23.7v36.6H318V3.4h50.3v12.1H330.3z"/>
        	<path d="M374.5,85.8V6.4L386.6,0v85.8H374.5z"/>
        	<path d="M421.9,87.1c-15.5,0-27.2-12.8-27.2-32.1c0-20.2,12-32.3,27.5-32.3c15.8,0,27.5,12.6,27.5,31.9
        		C449.8,75.1,437.7,87.1,421.9,87.1z M421.7,34.3c-9.2,0-14.8,8.1-14.8,20.4c0,13.5,6.2,21,15.4,21c9.2,0,15.2-9.3,15.2-20.6
        		C437.5,42.4,431.5,34.3,421.7,34.3z"/>
        	<path d="M510.9,85.8h-10.4l-8.4-31.2c-1.3-4.7-2.6-10.2-3.2-13.2c-0.6,2.9-1.9,8.6-3.2,13.3l-8.2,31.1h-10.4L450.3,24h12l7.3,30
        		c1.2,4.7,2.5,10.6,3.1,13.5c0.7-3.1,2.1-8.7,3.4-13.5l8.2-30h9.8l8.4,30.1c1.3,4.8,2.6,10.4,3.3,13.4c0.7-3.1,1.9-8.8,3.1-13.5
        		l7.3-30h12L510.9,85.8z"/>
        	<path d="M79.1,76.2c-6.7,0-12.7-4-14.9-13.2l40.5-12.2c-0.2-2.8-0.6-5.4-1.3-8c-3-11.6-11.1-20.1-24.7-20.1
        		c-16,0-27.1,11.3-27.1,32.3c0,20.5,12.2,32.1,26.7,32.1c9.4,0,15.9-2.9,21.3-8.1l-7.2-7.8C88.4,74.3,84.3,76.2,79.1,76.2z
        	 M78,33.7c7.9,0,12.1,4.5,13.8,10.5l-27.9,8.5l0-3.5C64.9,39.3,69.8,33.7,78,33.7z"/>
        </svg>
      </a>
      <div class="links">
        <a href="https://github.com/tensorflow/playground">Source on GitHub</a>
      </div>
    </div>
  </footer>
  <script src="bundle.js"></script>
  <!-- Google analytics -->
  <script src="analytics.js"></script>
</body>
</html>
